<template>
  <view>
    <view class="index">
      <!-- 1顶部搜索框 -->
      <u-search
        placeholder="搜索"
        v-model="keyword"
        bg-color="#ffff"
        border-color="red"
        :show-action="false"
      ></u-search>
    </view>
    <!-- 2 轮播图 - -->
    <u-swiper
      :list="swiperList"
      name="image_src"
      height="340"
      :effect3d="true"
      border-radius='0'
    ></u-swiper>
    <!-- 3导航 -->
    <view class="nav u-flex">
      <navigator
        class="u-flex-1 u-p-15"
        v-for="item in navList"
        :key="item.name"
      >
        <u-image mode="widthFix" :src="item.image_src"> </u-image>
      </navigator>
    </view>
    <!--4 楼层 -->
    <view class="floor">
      <view
        class="floor-group u-m-t-10"
        v-for="item1 in floorList"
        :key="item1.floor_title.name"
      >
        <!-- 标题 -->
        <view class="floor-group-title">
          <u-image mode="widthFix" :src="item1.floor_title.image_src">
          </u-image>
        </view>
        <!-- 内容 -->
        <view class="floor-group-content">
          <navigator v-for="item2 in item1.product_list" :key="item2.name">
            <u-image :src="item2.image_src" mode="widthFix"></u-image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数组
      swiperList: [],
      // 导航数据
      navList: [],
      // 楼层
      floorList: [],
    };
  },
  onLoad() {
    // 获取轮播图的数据
    this.gteSwiper();
    // 获取导航数据
    this.getNav();
    // 获取楼层数据
    this.getFloor();
  },
  methods: {
    // 获取轮播图的数据
    async gteSwiper() {
      // const [err, res] = await uni.request({
      //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
      // });
      // if (!err) {
      //   console.log("请求成功");
      //   console.log(res);
      //   this.swiperList = res.data.message;
      // } else {
      //   console.log("请求失败");
      // }
      //封装后的请求方式
      this.swiperList = await this.$u.http.get("/home/swiperdata");
    },
    // 获取导航数据
    async getNav() {
      // const [err, res] = await uni.request({
      //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
      // });
      // if (!err) {
      //   this.navList = res.data.message;
      // } else {
      //   console.log("请求失败");
      // }
      //封装后的请求方式
      this.navList = await this.$u.http.get("/home/catitems");
    },
    // 获取楼层数据
    async getFloor() {
      // const [err, res] = await uni.request({
      //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
      // });
      // if (!err) {
      //   this.floorList = res.data.message;
      // } else {
      //   console.log("请求失败");
      // }
       //封装后的请求方式
       this.floorList = await this.$u.http.get("/home/floordata");
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  background-color: red;
}
.floor {
  .floor-group-content {
    /* 清除浮动 */
    overflow: hidden;
    navigator {
      float: left;
      background-color: yellow;
      margin-left: 13rpx;
    }
    /* 第一个导航标签 设置 232 * 386 */
    navigator:first-child {
      width: 232rpx;
      height: 386rpx;
    }

    /* 后四个导航标签 */
    navigator:nth-last-child(-n + 4) {
      width: 233rpx;
      height: 188rpx;
    }
    /* 后2个导航标签 */
    navigator:nth-last-child(-n + 2) {
      margin-top: 10rpx;
    }
  }
}
</style>